/**************************************************************************************** Import */
import React, {Component} from 'react';
import CFooter from '../../system/page/footer';
import CAround from '../../system/contain/around';
import CHand from '../../system/contain/hand';
import CItemY from '../../system/contain/itemy';
import CIcon from '../../system/element/icon';
import CText from '../../system/element/text';
import Design from '../../../../design';

/**************************************************************************************** Component */
export default class PTabbar extends Component {

    /**
     * 渲染
     */
	render() {
        
        // 制作样式
        const footerProps = {x:'around', h:'100', bg:'#fff', bt:'1 #ddd', y:'center'};
        const touchProps = {f: 1, action: 0.6};
        const itemProps = {x: 'center'};
        const textProps = {size: 22, mt: 10};

        // color
        const current = this.props.current;
        const colorNormal = '#777';
        const colorFocus = 'green';
        const homeColor = current == 'Home' ? colorFocus : colorNormal;
        const serviceColor = current == 'Service' ? colorFocus : colorNormal;
        const userColor = current == 'User' ? colorFocus : colorNormal;

        // 渲染
		return (
			<CFooter {...footerProps}>
                <CAround>
                    <CHand x='center' {...touchProps} onPress={(e)=> {
                        if (current == 'Home') return;
                        this.props.nav.navigate('Home');
                    }}>
                        <CItemY x='center'>
                            <CIcon icon={Design.tabbar["tab_homea"]} color={homeColor} width='21' height='21' />
                            <CText color={homeColor} {...textProps}>首页</CText>
                        </CItemY>
                    </CHand>
                    <CHand x='center' {...touchProps} onPress={(e)=> {
                        if (current == 'Service') return;
                        this.props.nav.navigate('Service');
                    }}>
                        <CItemY x='center'>
                            <CIcon icon={Design.tabbar["tab_hearta"]} color={serviceColor} width='25' height='25' />
                            <CText color={serviceColor} {...textProps}>服务</CText>
                        </CItemY>
                    </CHand>
                    <CHand x='center' {...touchProps} onPress={(e)=> {
                        if (current == 'User') return;
                        this.props.nav.navigate('User');
                    }}>
                        <CItemY x='center'>
                            <CIcon icon={Design.tabbar["tab_person"]} color={userColor} width='21' height='21' />
                            <CText color={userColor} {...textProps}>我的</CText>
                        </CItemY>
                    </CHand>
                </CAround>
            </CFooter>
		);
	}
}
